<template>
  <div class="app-container">
    <a-row :gutter="24">
      <a-card  :bordered="false" class="box-card">
        <h1 slot="title">创建游戏</h1>
        <a-form layout="horizontal" :model="formState" ref="formRef" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-col :span="3" :xs="12">
            <a-form-item label="游戏图标">
              <a-upload v-model:fileList="formState.icons" list-type="picture-card" :max-count="1">
                <div v-if="formState.icons.length <1">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18">点击或拖拽上传</div>
                </div>
              </a-upload>
              <i class="fr">① 请您上传1张300×300像素，200KB以内的PNG格式直角图标。<br>② 上传成功后平台将对图片进行统一规范化处理。</i>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏宣传图" >
              <!-- action="/upload.do" -->
              <div class="upload-container">
              <a-upload v-model:fileList="formState.banner" list-type="picture-card" :multiple="true" :max-count="5">
                <div v-if="formState.banner.length <5">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18">点击或拖拽上传</div>
                </div>
              </a-upload>
              <div class="upload-instructions">① 请上传4~5张，建议尺寸1920X1080px，最小不低于370X180px；<br>② 支持JPG/PNG格式，单张图片不超过1M。此图片用于应用详情页展示。</div></div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏名称" name="name">
                <a-input
                  v-model:value="formState.name"
                  allow-clear
                  show-count
                  :maxlength="20"
                  placeholder="请输入20字以内的游戏名称"
                  style="width: 700px;"
                />
                <br>
                <i class="frInput">*包含中文、英文、数字、：、英文半角()，建议游戏名称与APK包中名称一致</i>
              </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="英文名称" name="englishName">
                <a-input
                  v-model:value="formState.englishName"
                  allow-clear
                  show-count
                  :maxlength="20"
                  placeholder="请输入英文名称"
                  style="width: 700px;"
                />
              </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item 
              label="游戏分类"
              name="types"
              has-feedback
              >
              <a-select
                v-model:value="formState.play"
                class="margin24"
                style="width: 120px"
                :options="options"
                placeholder="玩法"
              />
              <a-select
                v-model:value="formState.style"
                class="margin24"
                style="width: 120px"
                :options="options1"
                placeholder="风格"
                />
              <a-select
                v-model:value="formState.themes"
                class="margin24"
                style="width: 120px"
                :options="options2"
                placeholder="题材"
                />
              <a-select
                v-model:value="formState.features"
                mode="multiple"
                allowClear
                class="margin24"
                style="width: 210px"
                placeholder="特色"
                :options="options3"
                :max-tag-count="maxTagCount"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="适龄" name="age">
              <a-select
                v-model:value="formState.age"
                class="margin24"
                style="width: 200px"
                :options="options4"
                placeholder="适龄"
              ></a-select>
              <!-- <a-space class="icons" @click="views">
                <QuestionCircleOutlined /><i style="color: #4CC87E;font-style: normal;" >原文</i>
              </a-space> -->
              <a-space class="icons" @click="views">
                <a-popover title="Title">
                  <template #content>
                    <p>Content</p>
                    <p>Content</p>
                  </template>
                  <QuestionCircleOutlined />
                </a-popover>
                <i style="color: #4CC87E;font-style: normal;" >原文</i>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏状态" name="states">
              <a-checkbox-group v-model:value="formState.states" :options="optionsWithDisabled">
                <template #label="{ label }">
                  <span >{{ label }}</span>
                </template>
              </a-checkbox-group>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="一句话描述" name="description">
                <a-input
                  v-model:value="formState.description"
                  allow-clear
                  show-count
                  :maxlength="20"
                  placeholder="请输入5至15字的一句话介绍"
                  style="width: 700px;"
                />
              </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="简介" name="profile">
                <a-textarea
                  v-model:value="formState.profile"
                  allow-clear
                  :maxlength="100"
                  placeholder="请输入60~500字以内的游戏简介，让用户更了解游戏"
                  style="width: 700px;"
                />
              </a-form-item>
          </a-col>
         
          <a-col :span="3" :xs="24">
            <a-form-item
            :wrapperCol="{ span: 24 }"
            style="text-align: center"
          >
              <a-button htmlType="submit" style="margin-right: 16px; background-color: rgba(76, 200, 126, 1);" type="primary" @click="onSave">保存并提交</a-button>
              <a-button style="margin-left: 8px" @click="resetForm">取消保存</a-button>
            </a-form-item>
          
          </a-col>
        </a-form>
      </a-card>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive,toRaw  } from 'vue';
import {
    // SearchOutlined,
    QuestionCircleOutlined,
    PlusOutlined,
    UploadOutlined,
    RightOutlined,
    DeleteOutlined,
    CheckCircleTwoTone,
  } from '@ant-design/icons-vue';
  const labelCol = {
  style: {
    width: '180px',
  },
};
const wrapperCol = {
  span: 24,
};

const formRef = ref()
const formState = reactive({
  icons:[],
  banner:[],
  name: '',
  englishName: '',
  play: '',
  style : '',
  themes : '',
  features : [],
  age:[],
  states:[],
  description: '',
  profile:'',
});
const rules = {
  name: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 1,
      max: 20,
      message: 'Length should be 1 to 20',
      trigger: 'blur',
    },
  ],
  age: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  types3: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  states: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  description: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 5,
      max: 15,
      message: 'Length should be 5 to 15',
      trigger: 'blur',
    },
  ],
  profile: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 60,
      max: 500,
      message: 'Length should be 60 to 500',
      trigger: 'blur',
    },
  ],
}
const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 8,
  },
};
const formTailLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 14,
    offset: 4,
  },
};
const options = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
]);
const options1 = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
]);
const options2 = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
]);
const options3 = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
]);
const options4 = ref([
  {
    value: 'jack',
    label: '不限制',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
]);
const optionsWithDisabled =ref([
  {
      label: '修改',
      value: 'Apple',
    },
    {
      label: '推荐',
      value: 'Pear',
    },
    {
      label: '免费',
      value: 'Orange',
    },
    {
      label: '中文',
      value: 'Z',
    },
    {
      label: '免谷歌',
      value: 'M',
    },
    {
      label: '无广告',
      value: 'W',
    },
    {
      label: '需网络',
      value: 'X',
    },
    {
      label: '加速',
      value: 'J',
    },
    {
      label: '返利',
      value: 'F',
    },
    {
      label: 'VPN',
      value: 'vpn',
    },
])
// const state = reactive({
//   value4: ['Apple'],
// });
const maxTagCount = ref(2);
const onSave=() => {
  formRef.value.validate().then(()=>{
    console.log('values',formState,toRaw(formState));
  }).catch((e) => {
    console.log(formState,'catch--1111');

  })
}
const resetForm = () => {
  formRef.value.resetFields();
  formState.type = ''
  formState.date1 = ''
  formState.txt = ''
};
const views =()=>{
  console.log('view',1111);
}



</script>

<style lang="less" scoped>
.app-container{
  width: 100%;
  padding: 15px;
  background: #ececec;
}

.box-card {
  padding-left: 175px;
  width: 100%;
  border-radius: 2px;
  border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1{
    height: 48px;
    text-align: center;
    font-weight:bolder;
  }
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select){
  // width: 120px !important;
  // height: 120px !important;
}
.upload-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper){
  width: auto;
}
.upload-instructions {
  // flex: 1;
  // margin-left: 20px;
  font-size: 12px;
  color: #888;
}
.fr {
  display: block;
  // float: left;
  margin-top: -40px;
  margin-left:140px;
  // width: 400px;
  width: 100%;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.frInput {
  // display:flex;
  // float: left;
  // margin-top: -40px;
  // margin-left:140px;
  width: 400px;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.fr1 {
  margin-top: 0px !important;
}
.margin24{
  margin-right: 24px;
}
.margintop18{
  margin-top: 18px;
  font-weight: 400;
  font-size: 14px;
  color: #CCCCCC;
  line-height: 20px;
  text-align: left;
}
.icons{
  width: 80px;
  height: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer
}
.footer_content{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>